<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单数据分析</span>
            <el-select v-model="timeRange" size="mini" style="float: right; width: 120px" @change="handleTimeRangeChange">
              <el-option label="最近7天" value="7" />
              <el-option label="最近30天" value="30" />
              <el-option label="最近90天" value="90" />
            </el-select>
          </div>
          <div ref="orderChart" style="width: 100%; height: 400px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  data() {
    return {
      timeRange: '7',
      orderChart: null,
      chartData: {
        dates: ['2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-06', '2024-01-07'],
        orders: [5, 8, 12, 6, 9, 15, 10],
        amounts: [2500, 4000, 6000, 3000, 4500, 7500, 5000]
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (this.orderChart) {
      this.orderChart.dispose()
    }
  },
  methods: {
    initChart() {
      this.orderChart = echarts.init(this.$refs.orderChart)
      this.setChartOption()
    },
    setChartOption() {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['订单数量', '订单金额']
        },
        xAxis: {
          type: 'category',
          data: this.chartData.dates,
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '订单数量',
            min: 0,
            axisLabel: {
              formatter: '{value} 单'
            }
          },
          {
            type: 'value',
            name: '订单金额',
            min: 0,
            axisLabel: {
              formatter: '¥{value}'
            }
          }
        ],
        series: [
          {
            name: '订单数量',
            type: 'line',
            data: this.chartData.orders,
            smooth: true,
            itemStyle: {
              color: '#409EFF'
            }
          },
          {
            name: '订单金额',
            type: 'line',
            yAxisIndex: 1,
            data: this.chartData.amounts,
            smooth: true,
            itemStyle: {
              color: '#67C23A'
            }
          }
        ]
      }
      this.orderChart && this.orderChart.setOption(option)
    },
    handleTimeRangeChange() {
      // 这里模拟数据更新，实际项目中应该调用接口获取数据
      this.chartData = {
        dates: Array.from({ length: Number(this.timeRange) }, (_, i) => {
          const date = new Date()
          date.setDate(date.getDate() - (Number(this.timeRange) - i - 1))
          return date.toISOString().split('T')[0]
        }),
        orders: Array.from({ length: Number(this.timeRange) }, () => Math.floor(Math.random() * 20) + 5),
        amounts: Array.from({ length: Number(this.timeRange) }, () => Math.floor(Math.random() * 8000) + 2000)
      }
      this.setChartOption()
    },
    // 窗口大小改变时重新绘制图表
    handleResize() {
      this.orderChart && this.orderChart.resize()
    }
  },
  created() {
    window.addEventListener('resize', this.handleResize)
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.box-card {
  margin-bottom: 20px;
}
</style>
